<template>
    <view class="bg-[#F6F7F9] min-h-screen">
        <up-navbar :title="statusText" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view>
            <view v-if="Detail.deliveryType == 0 || Detail.deliveryType == 1" class="mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[16rpx] p-[30rpx] flex ">
            <view class="flex flex-1 flex-col mr-[40rpx]">
                <view class="mb-[20rpx]">{{ Detail.appStore?.name }}</view>
                <view class="flex items-center my-[20rpx]">
                    <image src="../static/haddress.png" class="w-[20rpx] h-[20rpx] block mr-[4rpx] flex-shrink-0" mode="scaleToFill"/>
                    <view class="text-[22rpx] text-[#999] font-normal">{{ Detail.appStore?.address }}</view>
                </view>
                <view class="flex items-center">
                    <image src="../static/htime.png" class="w-[20rpx] h-[20rpx] block mr-[4rpx] flex-shrink-0" mode="scaleToFill"/>
                    <view class="text-[22rpx] text-[#999] font-normal">营业时间：{{ Detail.appStore?.businessHours }}</view>
                </view>
            </view>
            <up-line direction="col" length="182rpx"></up-line>
            <view class="px-[68rpx] flex flex-col item-center justify-center">
                <view class="text-[22rpx] text-[#46A7FD] font-normal">联系/导航</view>
                <view class="text-[20rpx] text-[#999] font-normal mb-[16rpx] mt-[8rpx]">距离{{ Detail?.distance ? (Detail.distance/1000).toFixed(2) : '' }}km</view>
                <view class="flex items-center">
                    <image src="../static/bphone.png" class="w-[36rpx] h-[36rpx] mr-[32rpx] block" mode="scaleToFill"/>
                    <image src="../static/baddress.png" class="w-[36rpx] h-[36rpx] block" mode="scaleToFill"/>
                </view>
            </view>
            </view>
            <view v-else class="mx-[30rpx] my-[24rpx] rounded-[16rpx] p-[8rpx]">
                <view class="p-[24rpx] rounded-[16rpx]" style="background: linear-gradient( 90deg, #F0F2F5 0%, #FFFFFF 100%);">
                    <view class="flex">
                        <view style="background: linear-gradient( 90deg, #FF9200 0%, #FF4200 100%);" class="text-[20rpx] text-[#fff] font-normal px-[8rpx] py-[4rpx] rounded-[4rpx]">默认</view>
                            <view class="text-[30rpx] text-[#333] font-bold ml-[8rpx]">{{ Detail.province }} {{ Detail.city }} {{ Detail.area }}</view>
                            </view>  
                        <view class="mt-[12rpx] mb-[24rpx] text-[30rpx] text-[#333] font-bold">{{ Detail.address }}</view>  
                    <view class="text-[24rpx] text-[#666] font-normal">{{ Detail.receiveName }} {{ Detail.mobile}}</view>  
                </view>
            </view>
        </view>
        
        <view class="mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[16rpx] p-[30rpx]">
            <template v-for="(item,index) in Detail.orderPageVoList">
                <view class="mb-[48rpx] flex">
                    <image :src="item.pic" mode="scaleToFill" class="w-[136rpx] h-[136rpx] block rounded-[8rpx]"/>
                    <view class="ml-[24rpx] flex flex-1 justify-between">
                        <view class="flex flex-col justify-between">
                            <view>
                                <view class="mb-[4rpx] text-[30rpx] text-[#111] font-normal">{{ item.name }}</view>
                                <view class="text-[24rpx] text-[#666] font-normal">规格:
                                    <!-- <text v-for="(it,el) in Detail."></text> -->
                                </view>
                            </view>
                            <view class="flex items-center">
                                <view class="mr-[8rpx] text-[18rpx] text-[#ff4d18] font-normal px-[10rpx] py-[4rpx] border-[1rpx] border-[#ccc] rounded-[4rpx]" v-for="(it,el) in item.features" :key="el">{{ it }}</view>
                            </view>
                        </view>
                        <view class="flex flex-col justify-center items-center">
                            <priceNumber :price="item.price"></priceNumber>
                            <view class="text-[28rpx] text-[#333] font-normal">×{{ item.num }}</view>
                        </view>
                    </view>
                </view>
                <view class="flex items-center justify-end mb-[20rpx]" v-if="Detail.status == 401">
                    <view @click="GoComment(item)" class="rounded-[40rpx] py-[14rpx] px-[28rpx] border-[1rpx] border-[#F98D68] text-[#F98D68] text-[22rpx] font-normal mr-[16rpx]">去评论</view>
                    <view @click="AfterSale(item)" class="rounded-[40rpx] py-[14rpx] px-[28rpx] border-[1rpx] border-[#bebebe] text-[#333] text-[22rpx] font-normal">申请售后</view>
                </view>
            </template>
            <view class="flex items-center justify-between">
                <view class="text-[22rpx] text-[#f00] font-normal" v-if="Detail.status == 101">待付款</view>
                <view class="text-[22rpx] text-[#f00] font-normal" v-else>{{ statusText }}</view>
                <view class="flex items-center">
                    <view v-if="Detail.status == 101 || Detail.status == 102 || Detail.status == 103 || Detail.status == 201" @click="cancelOrder" class="border-[1rpx] rounded-[33rpx] border-[#e5e5e5] mr-[12rpx] px-[28rpx] py-[16rpx] text-[26rpx] text-[#333] font-normal">取消订单</view>
                    <view v-if="Detail.status == 101" @click="payOrders" class="border-[1rpx] rounded-[33rpx] border-[#f00] px-[28rpx] py-[16rpx] text-[26rpx] text-[#f00] font-normal">继续付款</view>
                </view>
            </view>
        </view>
        <view class="my-[24rpx] mx-[30rpx] bg-[#fff] rounded-[16rpx] px-[30rpx]">
            <view class="py-[30rpx]">
                <view class="flex justify-between items-center mb-[20rpx]">
                    <view>商品金额</view>
                    <priceNumber :price="Detail.totalPrice"></priceNumber>
                </view>
                <view class="flex justify-between items-center">
                    <view>待支付</view>
                    <priceNumber :price="Detail.payPrice"></priceNumber>
                </view>
            </view>
            <up-line></up-line>
            <view class="py-[30rpx]">
                <view class="flex justify-between items-center mb-[20rpx]">
                    <view class="text-[24rpx] text-[#333] font-noraml">订单编码</view>
                    <view class="flex items-center">
                        <view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">{{ Detail.orderSn }}</view>
                        <view class="px-[14rpx] py-[8rpx] bg-[##F7F8FA] rounded-[22rpx] text-[18rpx] text-[#333] font-normal" @click="copy">复制</view>
                    </view>
                </view>
                <view class="flex justify-between items-center mb-[20rpx]" v-if="Detail.createTime">
                    <view class="text-[24rpx] text-[#333] font-noraml">创建时间</view>
                    <view class="text-[24rpx] text-[#333] font-normal">{{ Detail.createTime }}</view>
                </view>
                <view class="flex justify-between items-center mb-[20rpx]">
                    <view class="text-[24rpx] text-[#333] font-noraml">支付方式</view>
                    <view class="text-[24rpx] text-[#333] font-normal flex items-center">
                        <image src="../static/wx.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] mr-[12rpx] block"/>
                        <view>微信支付</view>
                    </view>
                </view>
                <view class="flex justify-between items-center mb-[20rpx]">
                    <view class="text-[24rpx] text-[#333] font-noraml">物流单号</view>
                    <view class="flex items-center">
                        <view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">36882749710330003</view>
                        <view class="px-[14rpx] py-[8rpx] bg-[##F7F8FA] rounded-[22rpx] text-[18rpx] text-[#333] font-normal" @click="copy">复制</view>
                    </view>
                </view>
                <view class="flex justify-between items-center mb-[20rpx]" v-if="Detail.createTime">
                    <view class="text-[24rpx] text-[#333] font-noraml">下单时间</view>
                    <view class="text-[24rpx] text-[#333] font-normal">{{ Detail.createTime }}</view>
                </view>
                <view class="flex justify-between items-center mb-[20rpx]" v-if="Detail.payTime">
                    <view class="text-[24rpx] text-[#333] font-noraml">支付时间</view>
                    <view class="text-[24rpx] text-[#333] font-normal">{{ Detail.payTime }}</view>
                </view>
            </view>
        </view>
        <view @click="goQrcode" v-if="Detail.status == 301 && (Detail.deliveryType == 0 || Detail.deliveryType==1)" style="box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(249,141,104,0.2);" class="mx-[30rpx] py-[22rpx] text-[32rpx] text-[#ff4d18] font-normal text-center border-[1rpx] border-[#ff4d18] rounded-[16rpx]">出示二维码</view>
        <view @click="confirmReceipt" v-if="Detail.status == 301 && Detail.deliveryType == 2" style="box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(249,141,104,0.2);" class="mx-[30rpx] py-[22rpx] text-[32rpx] text-[#ff4d18] font-normal text-center border-[1rpx] border-[#ff4d18] rounded-[16rpx]">确认收货</view>
    </view>
</template>

<script setup>
import { ref ,computed } from 'vue';
import env from '@/config/common.js'
import { onLoad } from '@dcloudio/uni-app'
import priceNumber from '@/components/priceNumber.vue'
import { GetOrderCancel, GetOrderGood, GetOrderReceive } from '../../API/order';
const { current ,CheckTabA , id , Detail , copy , AfterSale , GoComment , getDetail , statusText , confirmReceipt , goQrcode , cancelOrder } = useDetail()
const { goback , gohome } = useTabList()
let title = ref('待付款')
function useTabList(){
    const goback=()=>{
        uni.navigateBack()
    }
    const gohome=()=>{
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return { goback , gohome }
}
function useDetail (){
    const id = ref('')
    const current = ref(0)
    const baseUrl = env.API_BASE_URL_DEV
    const Detail = ref({})
    const copy = ()=>{
        uni.setClipboardData({
	        data: 'hello',
	        success: function () {
		        console.log('success');
	        }
        });
    }
    const getDetail = async (id,value)=>{
        let { data } = await GetOrderGood(id,value)
        Detail.value = data
        Detail.value.orderPageVoList = data.orderPageVoList.map(item=>{
            item.pic = baseUrl + item.pic
            return item
        })
    }
    const confirmReceipt = async ()=>{
        let { data } = await GetOrderReceive(id.value)
        uni.getLocation({
		type: 'wgs84',
		geocode:true,//设置该参数为true可直接获取经纬度及城市信息
		success: async (res)=>{
            uni.showToast({
            title:'收货成功!',
            icon:'none'
        })
            await getDetail(id.value,{
                lat:res.latitude,
                lng:res.longitude
            })
		},
		fail: (err)=>{
			uni.showToast({
				title: '获取地址失败，将导致部分功能不可用',
				icon:'none'
			});
		}
	})
        
    }
    const payOrders = ()=>{
        
    }
    const statusText = computed(()=>{
        switch(Detail.value.status){
            case 101:
                return '待支付'
            case 102:
                return '已过期'
            case 103:
                return '支付中'
            case 201:
                return '待发货'
            case 301:
                return '待收货'
            case 401:
                return '待评价'
            case 501:
                return '已完成'
            case 502:
                return '退款中'
            case 503:
                return '退款成功'
            case 504:
                return '退款失败'
        }
    })
    const goQrcode = ()=>{
        uni.navigateTo({
            url:'/pageOrder/qrcode/qrcode?id=' + id.value
        })
    }
    const cancelOrder = async ()=>{
        uni.showModal({
            title: '提示',
            content: '是否取消订单',
            showCancel: true,
            success: async ({ confirm, cancel }) => {
                if(confirm){
                    let { data } = await GetOrderCancel(id.value)
                    uni.navigateBack()
                }
            }
        })
    }
    const GoComment = (item)=>{
        uni.navigateTo({
            url:'/pageOrder/OrderEvaluation/OrderEvaluation?item=' + JSON.stringify(item)
        })
    }
    const CheckTabA = (index)=>{
        current.value = index
    }
    const AfterSale = (item)=>{
        uni.navigateTo({
            url:'/pageOrder/AfterSalesForm/AfterSalesForm?item=' + JSON.stringify(item)
        })
    }
    return { CheckTabA, current , id , Detail ,AfterSale , copy , getDetail , GoComment , statusText , confirmReceipt , goQrcode , cancelOrder}
}
onLoad(async (options)=>{
    id.value = options.id
    uni.getLocation({
		type: 'wgs84',
		geocode:true,//设置该参数为true可直接获取经纬度及城市信息
		success: async (res)=>{
            await getDetail(id.value,{
                lat:res.latitude,
                lng:res.longitude
            })
		},
		fail: (err)=>{
			uni.showToast({
				title: '获取地址失败，将导致部分功能不可用',
				icon:'none'
			});
		}
	})
})
</script>

<style lang="scss" scoped>

</style>